﻿<phone:PhoneApplicationPage
    x:Class="Conqueror.WP.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:view="clr-namespace:Conqueror.WP.View"
    xmlns:telerikCore="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Core"
    xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
    xmlns:viewmodel="clr-namespace:Conqueror.WP.ViewModel"
    xmlns:adRotator="clr-namespace:AdRotator;assembly=AdRotator"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False"
    telerikCore:InteractionEffectManager.IsInteractionEnabled="True">
    
    <phone:PhoneApplicationPage.Resources>
        <viewmodel:MainPageViewModel x:Key="MainViewModel"/>
    </phone:PhoneApplicationPage.Resources>
    
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{StaticResource MainViewModel}">
        
        <ScrollViewer>
            <StackPanel Margin="12">
                <Grid Height="66" Background="{StaticResource PhoneAccentBrush}"
                      Margin="0,0,0,12" Tap="DisplayPlayerCard">
                    <TextBlock Text="{Binding Username}" Foreground="White"
                               FontSize="{StaticResource PhoneFontSizeMediumLarge}"
                               VerticalAlignment="Center" Margin="12,0"/>
                    <Image Source="/Image/Icons/appbar.people.profile.png"
                           HorizontalAlignment="Right"/>
                </Grid>
                
                <telerikPrimitives:RadTransitionControl x:Name="radTransitionControl">
                    <telerikPrimitives:RadTransitionControl.Transition>
                        <telerikPrimitives:RadSlideAndSwivelTransition PlayMode="Consecutively"/>
                    </telerikPrimitives:RadTransitionControl.Transition>
                    <telerikPrimitives:RadTransitionControl.Content>
                        <view:SelectedHelpCard/>
                    </telerikPrimitives:RadTransitionControl.Content>
                </telerikPrimitives:RadTransitionControl>

                <Grid Height="144" Background="{StaticResource PhoneAccentBrush}"
                      Margin="0,12,0,0" Visibility="{Binding ShowError}">

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    
                    <Rectangle Fill="Black"
                               Opacity="0.5" Grid.Column="1"/>
                    
                    <TextBlock Text="Unable to get your current games" Foreground="White" Margin="6"
                               VerticalAlignment="Top" HorizontalAlignment="Center" Grid.ColumnSpan="2"/>

                    <TextBlock Text="Check your network or join a game" Foreground="White" Margin="6"
                               VerticalAlignment="Bottom" HorizontalAlignment="Center" Grid.ColumnSpan="2"/>

                    <StackPanel Orientation="Horizontal"
                            Grid.ColumnSpan="2" VerticalAlignment="Center"
                            HorizontalAlignment="Center">
                        <Border CornerRadius="48" BorderThickness="3"
                                Background="Black" BorderBrush="White" Margin="6,0"
                                Tap="DisplayCellular">
                            <Border Background="White" Height="72" Width="72">
                                <Border.OpacityMask>
                                    <ImageBrush ImageSource="/Image/Icons/appbar.connection.4g.png"/>
                                </Border.OpacityMask>
                            </Border>
                        </Border>

                        <Border CornerRadius="48" BorderThickness="3"
                                Background="Black" BorderBrush="White" Margin="6,0"
                                Tap="DisplayWiFiConnection">
                            <Border Background="White" Height="72" Width="72">
                                <Border.OpacityMask>
                                    <ImageBrush ImageSource="/Image/Icons/appbar.connection.wifi.png"/>
                                </Border.OpacityMask>
                            </Border>
                        </Border>

                        <Border CornerRadius="48" BorderThickness="3"
                                Background="Black" BorderBrush="White" Margin="6,0"
                                Tap="DisplayWebsite">
                            <Border Background="White" Height="72" Width="72">
                                <Border.OpacityMask>
                                    <ImageBrush ImageSource="/Image/Icons/appbar.globe.png"/>
                                </Border.OpacityMask>
                            </Border>
                        </Border>
                        
                        <Border CornerRadius="48" BorderThickness="3"
                                Background="Black" BorderBrush="White" Margin="6,0"
                                Tap="DisplayMatchmakingPage">
                            <Border Background="White" Height="72" Width="72">
                                <Border.OpacityMask>
                                    <ImageBrush ImageSource="/Image/Icons/matchmaker.png"/>
                                </Border.OpacityMask>
                            </Border>
                        </Border>
                    </StackPanel>
                </Grid>

                <ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Hidden" Margin="-12,6">
                    <ItemsControl ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                                  ScrollViewer.VerticalScrollBarVisibility="Disabled"
                                  ItemsSource="{Binding Games}"
                                  MaxHeight="320" Margin="6,0">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <telerikPrimitives:RadWrapPanel Orientation="{Binding GamesOrientation}"/>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <view:CurrentGameTile Width="144" Height="144" Margin="6" Tap="DisplayGameCard"/>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </ScrollViewer>

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Grid Height="144" Margin="0,0,6,6"
                          Background="{StaticResource PhoneAccentBrush}"
                          Tap="DisplayMatchmakingPage">

                        <Image Source="/Image/Icons/matchmaker.png"/>

                        <TextBlock Text="Find A Match" HorizontalAlignment="Left"
                                   VerticalAlignment="Bottom" FontSize="{StaticResource PhoneFontSizeSmall}"
                                   Margin="12,0,0,6" Foreground="White"/>
                    </Grid>

                    <telerikPrimitives:RadCustomHubTile Height="144" Margin="6,0,0,6" Grid.Column="1"
                                                        Tap="DisplaySettingsPage" Width="222">
                        <telerikPrimitives:RadCustomHubTile.FrontContent>
                            <Grid Background="{StaticResource PhoneAccentBrush}">
                                <Image Source="/Image/Icons/settings.png"/>

                                <TextBlock Text="Settings" HorizontalAlignment="Right"
                                           VerticalAlignment="Bottom" FontSize="{StaticResource PhoneFontSizeSmall}"
                                           Margin="0,0,12,6" Foreground="White"/>
                            </Grid>
                        </telerikPrimitives:RadCustomHubTile.FrontContent>
                        <telerikPrimitives:RadCustomHubTile.BackContent>
                            <Grid Background="{StaticResource PhoneChromeBrush}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="66"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="66"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Grid Margin="12" Grid.ColumnSpan="2">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="*"/>
                                    </Grid.RowDefinitions>
                                    <TextBlock Text="Notifications"/>
                                    <TextBlock Text="Off" Foreground="{StaticResource PhoneAccentBrush}"
                                               Grid.Column="1" HorizontalAlignment="Right"/>
                                </Grid>
                                <Rectangle Fill="{StaticResource PhoneAccentBrush}"
                                           Grid.ColumnSpan="2" Grid.Row="1"/>
                                <Image Source="/Image/Icons/settings.png" Grid.Row="1"/>
                                <TextBlock Text="Settings" Foreground="White"
                                           Grid.Column="1" Grid.Row="1" VerticalAlignment="Center"
                                           Margin="12,0" HorizontalAlignment="Right"/>
                            </Grid>
                        </telerikPrimitives:RadCustomHubTile.BackContent>
                    </telerikPrimitives:RadCustomHubTile>

                </Grid>

                <Grid Height="66" Margin="0,6">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="66"/>
                        <ColumnDefinition Width="12"/>
                        <ColumnDefinition Width="66"/>
                    </Grid.ColumnDefinitions>

                    <Grid Height="66" Background="{StaticResource PhoneAccentBrush}"
                          Margin="0,0,12,0">
                        <TextBlock Text="Quick Actions" Foreground="White"
                               FontSize="{StaticResource PhoneFontSizeMediumLarge}"
                               VerticalAlignment="Center" Margin="12,0"/>
                    </Grid>

                    <Border Width="66" Height="66" Background="{StaticResource PhoneAccentBrush}"
                            Grid.Column="1">
                        <Image Source="/Image/Icons/appbar.add.png" Stretch="UniformToFill"
                               VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </Border>

                    <Border Width="66" Height="66" Background="{StaticResource PhoneAccentBrush}"
                            Grid.Column="3">
                        <Image Source="/Image/Icons/appbar.edit.png" Stretch="UniformToFill"
                               VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </Border>
                </Grid>

                <ItemsControl ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                                  ScrollViewer.VerticalScrollBarVisibility="Disabled"
                                  ItemsSource="{Binding QuickActions}"
                                  Margin="-6,0">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <telerikPrimitives:RadWrapPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <view:QuickAction Margin="6" DataContext="{Binding}"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </StackPanel>
        </ScrollViewer>

    </Grid>

</phone:PhoneApplicationPage>

